<template>
  <div class="Ranking">
    <span class="title">最新推荐</span>
    <div v-for="item in ranking">
      <el-divider class="link"></el-divider>
        <div class="item">
          <el-popover
                  placement="right"
                  width="250"
                  trigger="hover">
            <div class="detailed">作者：{{item.author}}</div>
            <el-rate
                    v-model="item.book_score"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}">
            </el-rate>
              <span class="detailed">分类：{{item.type_name}}</span>
              <span class="detailed">{{item.introduce}}</span>
            <el-button class="item-a" slot="reference" @click="ogBook(item.id)">《 {{item.name}} 》</el-button>
          </el-popover>
        </div>
      </div>
  </div>
</template>

<script>

  import { apiPage } from '@/request/api';

  export default {
    name: "Ranking",
    data() {
      return {
        ranking: [],
        value: 0
      }
    },
    created () {
      this.apiPage();
    },
    methods: {
      apiPage(){
        apiPage({
          index: 1,
          pageSize: 5
        }).then(res => {
            this.ranking= res.data.books,
          console.log(res)
        })
      },

      ogBook(book_id){
        this.$router.push('/Details');
        this.$bus.emit("bookId", book_id);
      },
    }
  }
</script>

<style scoped>
  .Ranking {
    width: 80%;
    margin: auto;
    display: flex;
    flex-direction: column;
  }
  .title {
    margin: 22px auto -5px;
    font-size: 30px;
    color: rgb(51, 204, 255);
    font-family: 华文隶书;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  }
  .link{
    margin: 20px 10px 8px;
  }
  .item{
    margin: 0 auto -10px;
  }
  .item-a {
    width: 250px;
    margin-left: 30px;
    font-size: 20px;
    line-height: 22px;
    border: none;
    color: rgb(231, 200, 0);
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
  }
  .detailed {
    display:block;
    line-height: 20px;
    margin: 10px 10px 10px 4px;
  }
</style>
